iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1

Front Matter : Markdown 的細節設定

我平常在寫 Markdown 文件的時候,常常都是新增一個文件之後就開始進行寫作了,其實這樣在畫面的呈現上也沒有什麼問題,只不過如果是使用 .md 來作為網站內容的管理時,就會感覺似乎沒有辦法進行什麼針對文件的設定或調整。

其實這個問題只要透過設定 Front Matter 就可以解決囉。

Front Matter 是在 Markdown 文件的開頭的一個設定區塊,主要就是透過標籤變數的設定,讓 VuePress 在解析的時候,可以讀取個別文件的設定,Front Matter 主要是使用 YAML 語法來進行撰寫,Front Matter 的書寫區域會用兩個 --- 來包裹住,藉此與主要內容區域的 Markdown 進行區隔。

這邊用我其中一篇文章當作例子來給你看看:

---
date: '2020-09-15'
slug: jamstack
tags:
- 前端開發
- VuePress
- Vue
title: JAMstack 到底是什麼巫術?
description: 來聊聊什麼是 JAMstack
image: https://i.imgur.com/u7De015.png
featured: true
---

# JAMstack 到底是什麼巫術?
...
...

可以看出兩個 --- 中的內容並不是 Markdown 的語法格式對吧!


Front Matter 設定的效果

而這些設定又有什麼作用呢?其實 VuePress 在解析 .md 文件的時候,都會將每個 .md 文件的 Front Matter 都讀取記錄下來。

當設定了預設會讀取的變數時, VuePress 就會自動的依照該設定的類別產生效果,像是如果設定了 title: JAMstack 到底是什麼巫術? 這個設定,因為 title 是預設會讀取的變數,而效果則是設定網頁的標題,所以設定了這個標籤的 .md 文件在編譯成網頁時,該網頁的標題就會是 JAMstack 到底是什麼巫術? 囉!

下面我列出我覺得比較必要、常用到的預設變數吧。


預設會讀取的變數

siteConfig 為 config.js 匯出的設定物件

  • title

    • 型別: string
    • 預設值: h1_title || siteConfig.title

    該頁面的網頁標題。

  • description

    • 型別: string
    • 預設值: siteConfig.description

    關於該頁面的網站描述,這個設定的內容會以 <meta> 標籤的形式加入到首頁的 HTML 中,這個設定是 SEO 搜尋引擎優化的關鍵之一,當有人搜尋到你的網站時,在 Google 搜尋結果的頁面上看到的網站介紹就是這一段文字喔。

    這邊主要是設置個別頁面的網站描述,首頁與各非文件網頁的描述可以在 config.js 中撰寫。

  • layout

    • 型別: string
    • 預設值: Layout

    如果你自行開發了主題,或是使用的主題有提供多種 Layout 版型的話,可以透過這個設定指定使用哪一個 Layout 版型,這個設定要取決於你所使用的主題,只有比較特殊的情況會用到。

  • permalink

    • 型別: string
    • 預設值: siteConfig.permalink

    這個設定是在你想要為某一個特定的頁面設定連結時使用的,在 VuePress 的解析中,文件的網址會按照一套規則去設定,但如果你有個別文件希望改變一下規則的話怎麼辦呢?

    像是預設可能是 http://localhost:8080/2020/09/15/jamstack/ 的連結,如果這篇文章實在太精華了,想要讓連結短一些,就可以透過 permalink: /jam 來將該網頁的網址改變成 http://localhost:8080/jam/ 了唷。


自定義的變數

而除了預設會讀取的變數以外,還有所謂的「自定義變數」,這些變數的設定是否會產生效果,就要看專案中使用的套件、主題是否有應用到該變數囉,像:

tags:
- 前端開發
- VuePress
- Vue

這段設定, tags 其實不是內建的設定,而是我設定用來在 @vuepress/plugin-blog 這個官方的擴充套件中讀取使用的變數。

而不管是預設讀取的,或者是自定義的,其實都會注入在全域可讀取的屬性當中,可以在主題、擴充套件中透過 $site.pages.frontmatter 進行讀取使用,所以在開發屬於自己的主題或套件時,是可以多加利用這項功能的。


上一篇
VuePress 1.x 版的架構核心:擴充套件
下一篇
VuePress 模板與主題使用
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言